<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outter1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            position: relative;
        }

        .box1 {
            /* 要求 让盒子元素相对于外部的水平 垂直居中 使用定位来实现*/
            width: 100px;
            height: 100px;
            background-color: rgb(223, 80, 80);
            /* 开启定位 定位一旦开始 那么对应的元素就变成了一个定位元素 */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            /* 文字垂直水平居中 */
            text-align: center;
            line-height: 100px;
        }

        .outter2 {
            height: 400px;
            background-color: skyblue;
            position: relative;
        }

        .box2 {
        /* 要求 不知道父亲的具体宽高 需要子类直接填充父类 子类还带有边框以及边界*/

            width: 200px;
            height: 200px;
            background-color: rgb(223, 80, 80);
            /* 开启定位 定位一旦开始 那么对应的元素就变成了一个定位元素 */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            /* 文字垂直水平居中 */
            text-align: center;
            line-height: 200px;
        }


    </style>
</head>
<body>
    <div class="outter1">
        <div class="box1">
            盒子元素
        </div>
    </div>
    <hr>

        <div class="outter2">
        <div class="box2">
            元素填满父元素
        </div>
    </div>
</body>
</html>